<template>
  <div class="vip-container">
    <!-- 顶部导航 -->
    <div class="nav-header">
      <div class="back-button" @click="goBack">
        <van-icon name="arrow-left" size="20" />
      </div>
      <div class="header-title">VIP特权</div>
      <div class="share-button" @click="shareVip">
        <van-icon name="share" size="20" />
      </div>
    </div>

    <!-- VIP Banner -->
    <div class="vip-banner">
      <div class="banner-content">
        <h2 class="banner-title">尊贵VIP会员</h2>
        <p class="banner-subtitle">解锁专属特权，享受更多收益</p>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <!-- VIP等级卡片 -->
      <div class="vip-level-card">
        <h3 class="card-title">您的VIP等级</h3>
        
        <div class="vip-level-info">
          <div class="current-level">
            <div class="level-badge">
              <span>VIP {{ userData.vipLevel || 0 }}</span>
            </div>
            <div class="level-name" >{{ getVipLevelName(userData.vipLevel) }}</div>
          </div>
          
          <div class="level-progress">
            <div class="progress-header">
              <span class="progress-label">下一等级进度</span>
              <span class="progress-value">{{ userData.levelProgress || 0 }}/{{ userData.levelTarget || 100 }}</span>
            </div>
            <div class="progress-bar-bg">
              <div class="progress-bar-fill" :style="{width: calculateProgress() + '%'}"></div>
            </div>
          </div>
        </div>
        
        <div class="level-benefits">
          <div class="benefit-item">
            <van-icon name="diamond" class="benefit-icon" />
            <span class="benefit-text">当前等级特权：{{ getCurrentLevelBenefit() }}</span>
          </div>
          <div class="benefit-item">
            <van-icon name="upgrade" class="benefit-icon" />
            <span class="benefit-text">下一等级特权：{{ getNextLevelBenefit() }}</span>
          </div>
        </div>
      </div>
      
       <!-- 加入VIP按钮 -->
      <div v-if="!userData.isVip" class="join-vip-section">
        <van-button type="primary" block class="join-vip-button-large" @click="joinVip">
          立即加入VIP
        </van-button>
      </div>

      <!-- VIP特权 -->
      <div class="vip-privileges-section">
        <h3 class="section-title">VIP特权</h3>
        
        <div class="privileges-list">
          <!-- 特权1 -->
          <div class="privilege-card">
            <div class="privilege-icon gold">
              <van-icon name="gold-coin" />
            </div>
            <div class="privilege-content">
              <h4 class="privilege-title">永久享受运营分红权利</h4>
              <p class="privilege-desc">
                分红机制：每周直接所有的商品交易总额比例用于给VIP用户瓜分，VIP等级越高，分红越多。
              </p>
            </div>
          </div>
          
          <!-- 特权2 -->
          <div class="privilege-card">
            <div class="privilege-icon blue">
              <van-icon name="balance-o" />
            </div>
            <div class="privilege-content">
              <h4 class="privilege-title">交易手续费打骨折</h4>
              <p class="privilege-desc">
                提现转账规则：VIP等级越高，交易手续费越低(最低可以免手续费)，排队交易永远排在前面，使用最高的gas交易，直接插队区块打包。
              </p>
            </div>
          </div>
          
          <!-- 特权3 -->
          <div class="privilege-card">
            <div class="privilege-icon orange">
              <van-icon name="gift" />
            </div>
            <div class="privilege-content">
              <h4 class="privilege-title">邀请奖励</h4>
              <p class="privilege-desc">
                邀请规则：邀请人可以获得直推间推奖励，奖励覆盖全链路VIP(最高八级分润)。核心逻辑： 就是会员等级越高，自己分的越多！下级会员等级越高，自己分的就更多！会员等级都高：大家一起分的越多！
              </p>
            </div>
          </div>
          
          <!-- 特权4 -->
          <div class="privilege-card">
            <div class="privilege-icon purple">
              <van-icon name="medal" />
            </div>
            <div class="privilege-content">
              <h4 class="privilege-title">推荐奖励</h4>
              <p class="privilege-desc">
                推荐规则：切换到活动中心页面，参与活动，即可获得推荐奖励。
              </p>
            </div>
          </div>
        </div>
      </div>


      <!-- VIP如何提升 -->
      <div class="vip-upgrade-section">
        <h3 class="section-title">VIP如何提升</h3>
        
        <div class="upgrade-methods">
          <!-- 方法1 -->
          <div class="upgrade-method-card">
            <div class="method-icon gold">
              <van-icon name="gold-coin" />
            </div>
            <div class="method-content" @click="goToUpgrade(1)">
              <h4 class="method-title">消费升级</h4>
              <p class="method-desc">
                商城购买商品可获得成长值奖励。
              </p>
            </div>
          </div>
          
          <!-- 方法2 -->
          <div class="upgrade-method-card">
            <div class="method-icon blue">
              <van-icon name="friends-o" />
            </div>
            <div class="method-content" @click="goToUpgrade(2)">
              <h4 class="method-title">邀请升级</h4>
              <p class="method-desc">
                成功邀请新用户并完成首次消费，每邀请1人可以成长值。
              </p>
            </div>
          </div>
          
          <!-- 方法3 -->
          <div class="upgrade-method-card">
            <div class="method-icon orange">
              <van-icon name="clock-o" />
            </div>
            <div class="method-content" @click="goToUpgrade(3)">
              <h4 class="method-title">活跃度升级</h4>
              <p class="method-desc">
                连续登录和参与平台活动可获得成长值奖励。
              </p>
            </div>
          </div>
          
          <!-- 方法4 -->
          <div class="upgrade-method-card">
            <div class="method-icon purple">
              <van-icon name="medal-o" />
            </div>
            <div class="method-content" @click="goToUpgrade(4)">
              <h4 class="method-title">参与项目升级</h4>
              <p class="method-desc">
               参与平台提供的优质项目，可以分红，还可以提升成长值
              </p>
            </div>
          </div>

           <!-- 方法5 -->
          <div class="upgrade-method-card">
            <div class="method-icon purple">
              <van-icon name="medal-o" />
            </div>
            <div class="method-content" @click="goToUpgrade(5)">
              <h4 class="method-title">质押HDFS</h4>
              <p class="method-desc">
               参与平台质押HDFS，可以活动对的成长值
              </p>
            </div>
          </div>
        </div>
      </div>
    

      <!-- VIP等级介绍 -->
      <div class="vip-intro-section">
        <h3 class="section-title">VIP等级介绍</h3>
        
        <div class="level-cards">
          <div class="level-card" v-for="level in vipLevels" :key="level.level">
            <div class="level-card-header"  >
              <div class="level-icon" :class="'level-' + level.level">
                <span>VIP {{ level.level }}</span>
              </div>
              <div class="level-name">{{ level.name }}</div>
            </div>
            <div class="level-card-content">
              <div class="level-benefit-item" v-for="(benefit, index) in level.benefits" :key="index">
                <van-icon name="success" class="benefit-check" />
                <span>{{ benefit }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 加入VIP按钮 -->
      <div v-if="!userData.isVip" class="join-vip-section">
        <van-button type="primary" block class="join-vip-button-large" @click="joinVip">
          立即加入VIP
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showLoadingToast } from 'vant'
import { getUserVipInfo } from '@/api/vip'

const router = useRouter()
const loading = ref(false)

// 用户数据
const userData = ref({
  isVip: false,
  vipLevel: 0,
  levelProgress: 0,
  levelTarget: 100
})

// VIP等级数据
const vipLevels =ref([])

// 计算VIP等级进度百分比
const calculateProgress = () => {
  if (!userData.value.levelProgress || !userData.value.levelTarget) return 0
  const progress = (userData.value.levelProgress / userData.value.levelTarget) * 100
  return Math.min(progress, 100)
}

// 获取VIP等级名称
const getVipLevelName = (level) => {
  const vipLevel = vipLevels.value.find(vl => vl.level === level)
  return vipLevel ? vipLevel.name : '普通用户'
}

// 获取当前等级特权
const getCurrentLevelBenefit = () => {
  const level = userData.value.vipLevel || 0
  if (level === 0) return '无特权'
  
  const vipLevel = vipLevels.value.find(vl => vl.level === level)
  return vipLevel ? vipLevel.benefits.join('、') : '无特权'
}

// 获取下一等级特权
const getNextLevelBenefit = () => {
  const nextLevel = (userData.value.vipLevel || 0) + 1
  if (nextLevel > vipLevels.value.length) return '已达最高等级'
  
  const vipLevel = vipLevels.value.find(vl => vl.level === nextLevel)
  return vipLevel ? vipLevel.benefits.join('、') : '无特权'
}

// 加载用户VIP信息
const loadUserVipInfo = async () => {
  try {
    loading.value = true
    const res = await getUserVipInfo()
    if (res.code === 0 && res.data) {

      //等级
      if(res.data.list && res.data.list.length > 0){
        let arr = new Array();
        for(let i=0;i<res.data.list.length;i++){
          arr.push({
            level: res.data.list[i].lv,
            name:res.data.list[i].name,
            benefits:res.data.list[i].privilege.split(',')
          });
        }
        vipLevels.value = arr;
      }

  
      //vip的信息
      userData.value = {
        isVip: res.data.curLv.lv > 0 || false,
        vipLevel: res.data.curLv.lv || 0,
        levelProgress: res.data.point || 0,
        levelTarget: res.data.curLv.maxPoint || 100
      }
    }
  } catch (error) {
    console.error('加载用户VIP信息出错:', error)
    showToast('获取用户信息失败')
  } finally {
    loading.value = false
  }
}

// 初始化数据
onMounted(() => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
  })
  
  loadUserVipInfo().finally(() => {
    showLoadingToast().close()
  })
})

// 方法
const goBack = () => {
  router.back()
}

const shareVip = () => {
  showToast('分享功能开发中')
}

const joinVip = async () => {
  if (!userData.value.isVip) {
     router.push('/pool-join')
  }
}

const goToUpgrade = (typ) => {
  if(typ == 1){
    router.push('/products')
  }else if(typ == 2){
    router.push('/mine')
  }else if(typ == 3){
    router.push('/active')
  }else if(typ == 4){
    router.push('/home')
  }
  
}

</script>

<style scoped>
.vip-container {
  min-height: 100vh;
  background-color: #000;
  color: #fff;
  padding-bottom: 24px;
}

/* 顶部导航 */
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  background-color: #000;
  z-index: 100;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
  border-bottom: 1px solid rgba(251, 191, 36, 0.3);
}

.back-button, .share-button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #f59e0b;
}

/* VIP Banner */
.vip-banner {
  position: relative;
  height: 220px;
  margin-top: 44px;
  overflow: hidden;
  background-color: #000;
}

.vip-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1000&auto=format&fit=crop') center/cover;
  opacity: 0.4;
}

.vip-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at top, rgba(251, 191, 36, 0.2), transparent 70%);
}

.banner-content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.banner-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  background: linear-gradient(to right, #f7e2a9, #f59e0b, #f7e2a9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
}

.banner-subtitle {
  font-size: 16px;
  color: rgba(251, 191, 36, 0.8);
  margin-bottom: 24px;
  text-align: center;
}

.vip-badge {
  position: relative;
  padding: 8px 24px;
  background: linear-gradient(to right, #f59e0b, #d97706);
  color: #000;
  font-weight: 700;
  font-size: 18px;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
  border: 1px solid rgba(251, 191, 36, 0.5);
}

.join-vip-button {
  background: linear-gradient(to right, #f59e0b, #d97706) !important;
  border: none !important;
  color: #000 !important;
  font-weight: 700;
  border-radius: 20px;
  padding: 8px 24px !important;
}

/* 内容区域 */
.content-area {
  padding: 0 16px;
  max-width: 800px;
  margin: 0 auto;
}

/* VIP等级卡片 */
.vip-level-card {
  margin-top: -24px;
  position: relative;
  z-index: 20;
  background: linear-gradient(to bottom, #3f2b0e, #000);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #f59e0b;
  margin-bottom: 16px;
  text-align: center;
}

.vip-level-info {
  margin-bottom: 20px;
}

.current-level {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.level-badge {
  background: linear-gradient(to right, #f59e0b, #d97706);
  color: #000;
  font-weight: 700;
  font-size: 18px;
  padding: 8px 16px;
  border-radius: 20px;
  margin-right: 12px;
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
}

.level-name {
  font-size: 18px;
  font-weight: 600;
  color: #f59e0b;
}

.level-progress {
  margin-bottom: 16px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.progress-label {
  color: #f59e0b;
}

.progress-value {
  color: #f8f8f8;
  font-weight: 500;
}

.progress-bar-bg {
  height: 8px;
  background-color: rgba(251, 191, 36, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(to right, #f59e0b, #d97706);
  border-radius: 4px;
}

.level-benefits {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.benefit-item {
  display: flex;
  align-items: center;
  color: #f8f8f8;
}

.benefit-icon {
  color: #f59e0b;
  margin-right: 8px;
  font-size: 16px;
}

.benefit-text {
  font-size: 14px;
}

/* VIP等级介绍 */
.vip-intro-section {
  margin-top: 24px;
}

.level-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.level-card {
  background: linear-gradient(to right, rgba(251, 191, 36, 0.1), rgba(0, 0, 0, 0.8));
  border-radius: 8px;
  padding: 16px;
  border: 1px solid rgba(251, 191, 36, 0.1);
}

.level-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.level-icon {
  padding: 6px 12px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 14px;
  margin-right: 12px;
}

.level-icon.level-0 {
  background: linear-gradient(to right, #cac5c5, #837a74);
  color: #fff;
}

.level-icon.level-1 {
  background: linear-gradient(to right, #b45309, #92400e);
  color: #fff;
}

.level-icon.level-2 {
  background: linear-gradient(to right, #9ca3af, #6b7280);
  color: #fff;
}

.level-icon.level-3 {
  background: linear-gradient(to right, #f59e0b, #d97706);
  color: #000;
}

.level-icon.level-4 {
  background: linear-gradient(to right, #a5f3fc, #67e8f9);
  color: #000;
}

.level-icon.level-5 {
  background: linear-gradient(to right, #c4b5fd, #a78bfa);
  color: #000;
}
.level-icon.level-6 {
  background: linear-gradient(to right, #a398cf, #3ab0d4);
  color: #000;
}
.level-icon.level-7 {
  background: linear-gradient(to right, #d6ca19, #abd80a);
  color: #000;
}
.level-icon.level-8 {
  background: linear-gradient(to right, #aa46ad, #b80ca9);
  color: #000;
}

.level-card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.level-benefit-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.benefit-check {
  color: #f59e0b;
  margin-right: 8px;
  font-size: 14px;
}

/* VIP如何提升 */
.vip-upgrade-section {
  margin-top: 24px;
}

.upgrade-methods {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.upgrade-method-card {
  display: flex;
  background: linear-gradient(to right, rgba(251, 191, 36, 0.1), rgba(0, 0, 0, 0.8));
  border-radius: 8px;
  padding: 16px;
  border: 1px solid rgba(251, 191, 36, 0.1);
}

.method-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.method-content {
  flex: 1;
}

.method-title {
  font-size: 16px;
  font-weight: 600;
  color: #f59e0b;
  margin-bottom: 8px;
}

.method-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.method-note {
  font-size: 12px;
  color: #f59e0b;
  margin-top: 8px;
}

/* 邀请任务 */
.invite-tasks-section {
  margin-top: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #f59e0b;
}

.time-badge {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #f59e0b;
  background-color: rgba(251, 191, 36, 0.1);
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.time-badge .van-icon {
  margin-right: 4px;
  font-size: 12px;
}

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.task-card {
  background: linear-gradient(to right, rgba(251, 191, 36, 0.1), rgba(0, 0, 0, 0.8));
  border-radius: 8px;
  padding: 16px;
  border: 1px solid rgba(251, 191, 36, 0.1);
}

.task-card.completed {
  background: linear-gradient(to right, rgba(251, 191, 36, 0.2), rgba(0, 0, 0, 0.8));
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.task-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.task-number-container {
  margin-right: 12px;
}

.task-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  background-color: rgba(251, 191, 36, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.task-card.completed .task-number {
  background: linear-gradient(to right, #f59e0b, #d97706);
  color: #000;
  border: none;
}

.task-title {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: #f8f8f8;
}

.task-reward {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  background-color: rgba(251, 191, 36, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.task-card.completed .task-reward {
  background: linear-gradient(to right, #f59e0b, #d97706);
  color: #000;
  border: none;
}

.task-progress {
  margin-bottom: 12px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.progress-label {
  color: #f59e0b;
}

.progress-value {
  color: #f8f8f8;
  font-weight: 500;
}

.progress-bar-bg {
  height: 8px;
  background-color: rgba(251, 191, 36, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(to right, #f59e0b, #d97706);
  border-radius: 4px;
}

.task-card.completed .progress-bar-fill {
  background: linear-gradient(to right, #f59e0b, #d97706);
}

.task-status {
  text-align: right;
  font-size: 14px;
  color: #f59e0b;
  background-color: rgba(251, 191, 36, 0.1);
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  margin-left: auto;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

/* VIP特权 */
.vip-privileges-section {
  margin-top: 24px;
}

.privileges-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.privilege-card {
  display: flex;
  background: linear-gradient(to right, rgba(251, 191, 36, 0.1), rgba(0, 0, 0, 0.8));
  border-radius: 8px;
  padding: 16px;
  border: 1px solid rgba(251, 191, 36, 0.1);
}

.privilege-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.privilege-icon.gold {
  background: linear-gradient(to bottom right, #f59e0b, #d97706);
  color: #000;
}

.privilege-icon.blue {
  background: linear-gradient(to bottom right, #3b82f6, #1d4ed8);
  color: #fff;
}

.privilege-icon.orange {
  background: linear-gradient(to bottom right, #f97316, #c2410c);
  color: #fff;
}

.privilege-icon.purple {
  background: linear-gradient(to bottom right, #8b5cf6, #6d28d9);
  color: #fff;
}

.privilege-content {
  flex: 1;
}

.privilege-title {
  font-size: 16px;
  font-weight: 600;
  color: #f59e0b;
  margin-bottom: 8px;
}

.privilege-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.privilege-time {
  font-size: 12px;
  color: rgba(251, 191, 36, 0.5);
  margin-top: 8px;
}

/* 加入VIP按钮 */
.join-vip-section {
  margin-top: 24px;
  margin-bottom: 16px;
  position: relative;
}

.join-vip-section::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(to right, #f59e0b, #d97706);
  border-radius: 12px;
  z-index: 0;
  opacity: 0.7;
  filter: blur(8px);
}

.join-vip-button-large {
  position: relative;
  z-index: 1;
  background: linear-gradient(to right, #f59e0b, #d97706) !important;
  border: none !important;
  color: #000 !important;
  font-weight: 700;
  font-size: 18px !important;
  height: 48px !important;
  border-radius: 8px;
}
</style>